<!-- SpontaneousMoments_Frame.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<title>精彩瞬间frame</title>
		<link rel="stylesheet" href="../../css/base.css">
		<link rel="stylesheet" href="../../css/CFNetPP_Base.css">
		<style type="text/css">
			html,body{
				background-color: white;
			}
			p{
				margin: 0;
			}
			.content-div{
				position: relative;
			}
			.add-div{
				padding: 10px;
				padding-bottom: 0;
				position: relative;
			}
			.has-b-line-div:before{
				content: " ";
			    position: absolute;
			    bottom: 0;
			    width: calc(100% - 20px);
			    height: 1px;
			    border-bottom: 1px solid #d9d9d9;
			    color: #d9d9d9;
			    -webkit-transform-origin: 0 0;
			    transform-origin: 0 0;
			    -webkit-transform: scaleY(.5);
			    transform: scaleY(.5);
			    left: 10px;
			}
			.add-img-div{
				width: 100px;
			}
			.add-img{
				width: 100px;
				height: 100px;
				display: block;
			}
			.add-img-title{
				width: 100px;
				text-align: center;
				line-height: 2em;
			}
			.top-time-title{
				line-height: 2em;
				text-align: left;
			}
			.pic-div{
				/*padding: 10px;
				padding-top: 0;*/
				overflow: auto;
			}
			.top-time-title-div{
				padding: 0 10px;
			}
			.pic-cell{
				position: relative;
				width: 30%;
				padding-bottom: 30%;
				float: left;
				margin-left: 2.2%;
				margin-bottom: 2.2%;
				border: 1px solid #d9d9d9;
			}
			.pic-cell-img{
				position: absolute;
				left: 4px;
				top: 4px;
				width: calc(100% - 8px);
				height: calc(100% - 8px);
				background-image: url(../../image/course_placehoder.png);
				background-repeat: no-repeat;
			    background-size: cover;
			    background-position: center;
			}
			.load-more-content{
				position: relative;
				width: 30%;
				padding-bottom: 30%;
				float: left;
				margin-left: 2.2%;
				margin-bottom: 2.2%;
				border: 1px solid #fff;
			}
			.load-more-title{
				width: 100%;
				position: absolute;
				text-align: center;
				padding: 40% 0;
			}
			.hide-class{
				display: none;
			}
			.noSign {
			    padding: 40px 0; 
			}
			.loadFailure{
				padding: 40px 0; 
			}
			.prompt-div{
				position: absolute;
				top: 10px;
				left: 110px;
				padding: 20px 10px;
			}
			.prompt-p{
				color: #666;
				font-size: 14px;
			}
		</style>
	</head>
	<body>
		<div class="content-div">
			<div class="add-div has-b-line-div">
				<div class="add-img-div" onclick="toChoosePicClick()">
					<img src="../../image/add_pic.png" class="add-img">
					<p class="add-img-title base_dark_grey_shallow base_content_font">上传图片</p>
				</div>
				<div class="prompt-div">
					<p class="prompt-p">温馨提示 : </p>
					<p class="prompt-p">建议上传图片格式 : JPEG、JPG、PNG、BMP</p>
				</div>
			</div>
			<div id="pic_f_div">

				<!-- <div class="pic-div">
					<div class="top-time-title-div">
						<p class="top-time-title base_dark_grey base_title_font">
							2017-11-20 （共1张）
						</p>
					</div>
					<div class="pic-list-div">
						<div class="pic-list-view">
							<div class="pic-cell">
								<div class="pic-cell-img"></div>
							</div>
						</div>
						<div class="load-more-content">
							<p class="load-more-title base_dark_grey_shallow base_title_font">
								查看更多...
							</p>
						</div>
					</div>
				</div>
				<div class="pic-div">
					<div class="top-time-title-div">
						<p class="top-time-title base_dark_grey base_title_font">
							2017-11-20 （共1张）
						</p>
					</div>
					<div class="pic-list-div">
						<div class="pic-list-view">
							<div class="pic-cell">
								<div class="pic-cell-img"></div>
							</div>
						</div>
						<div class="load-more-content">
							<p class="load-more-title base_dark_grey_shallow base_title_font">
								查看更多...
							</p>
						</div>
					</div>
				</div> -->

			</div>
		</div>
		<div class="noSign" hidden="hidden" id="noData">
			<img src="../../image/icon_img.png" width="60%">
			<p class="font16 top_15 base_dark_grey" >
				暂无数据
			</p>
		</div>
		<div class="loadFailure" hidden="hidden" id="noNet">
			<img src="../../image/icon_img01.png" width="60%">
			<p class="" >
				数据加载失败
			</p>
			<p>
				请检查您的网络
			</p>
			<button type="button" class="mui-btn mui-btn-outlined" onclick="loadNewData()">
				重新加载
			</button>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/jquery.min.js"></script>
	<script type="text/javascript" src="../../script/MD5.js"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<script type="text/javascript" src="../../script/timeStampTool.js"></script>
	<script type="text/javascript">
		var choosePicArr;
		var refreshCount = 0;
		var page = 1;
		var rows = 5;
		var currentPicArr = new Array();//存储所有加载的图片数组
		apiready = function() {
			setRefreshHeader();
			setPullUpRefresh();
			loadNewData();
			setupNotifi();
		}
		function setupNotifi(){
			api.addEventListener({
			    name: 'refreshPicListNotifi'
			}, function(ret, err) {
			    loadNewData();
			});
		}
		function loadNewData(){
			page = 1;
			loadData();
		}
		function loadMoreData(){
			page++;
			loadData();
		}
		function loadData(){
			var params = {
				uid : $api.getStorage('cfnetppuid'),
				planid : api.pageParam.pid,
				jid : $api.getStorage('cfnetppjxid'),
				courseid : api.pageParam.cid,
				page : page,
				rows : rows
			};
			// console.log(url_getSpontaneousMomentsList+'\n'+JSON.stringify(params));
			cfnetppPOST(url_getSpontaneousMomentsList, params, true, function(data, status){
				api.refreshHeaderLoadDone();
				if (status == 'success') {
					if (data.code == 200) {
						var smArr = data.data;//精彩瞬间数组
						if (smArr != null && smArr.constructor == Array && smArr.length > 0) {
							$('#noData').hide();
							$('#noNet').hide();
							refreshCount = smArr.length;
							setupCurrentList(smArr);
						}else{
							refreshCount = 0;
							if (page == 1) {
								$('#noData').show();
								$('#noNet').hide();
							}
						}
					}else{
						refreshCount = 0;
						if (page == 1) {
							$('#noData').show();
							$('#noNet').hide();
						}
					}
				}else{
					if (page == 1) {
						$('#noData').hide();
						$('#noNet').show();
					}else{
						page--;
					}
				}
			});
		}
		function setupCurrentList(picArr){
			if (page == 1){
				currentPicArr = new Array();
				$('#pic_f_div').html('');
			}
			var index = currentPicArr.length;
			currentPicArr = currentPicArr.concat(picArr);
			for (var i = index; i < currentPicArr.length; i++) {
				var oneDayData = currentPicArr[i];
				var imgArr = oneDayData.imgArr;
				var htmlString = '';
				if (imgArr != null && imgArr.constructor == Array && imgArr.length > 0) {
					htmlString += sectionHtmlPrefix(oneDayData, i);
					for (var j = 0; j < imgArr.length; j++) {
						var imgData = imgArr[j];
						htmlString += cellHtmlString(imgData, i, j);
					}
					htmlString += sectionHtmlSuffix(oneDayData, i);
				}
				$('#pic_f_div').append(htmlString);
			}
			setupCellClick();
		}
		function setupCellClick(){
			$('.pic-cell').unbind('click');
			$('.pic-cell').click(function(event) {
				var indexF = parseInt($(this).attr('indexF'));
				var indexS = parseInt($(this).attr('indexS'));
				var onDayData = currentPicArr[indexF];
				var pageParam = api.pageParam;
				pageParam["indexS"] = indexS;
				pageParam["onDayData"] = onDayData;
				pageParam["type"] = 'tapCell';//点击图片进入
				api.openWin({useWKWebView:true,
				    name: 'SpontaneousMomentsDetail_Win',
				    url: 'SpontaneousMomentsDetail_Win.html',
				    pageParam: pageParam
				});
			});
			$('.load-more-content').unbind('click');
			$('.load-more-content').click(function(){
				var index = parseInt($(this).attr('index'));
				var onDayData = currentPicArr[index];
				// var pageParam = api.pageParam;
				// pageParam["indexS"] = 0;
				// pageParam["type"] = 'tapMore';//点击更多进入
				// pageParam["onDayData"] = onDayData;
				// api.openWin({useWKWebView:true,
				//     name: 'SpontaneousMomentsDetail_Win',
				//     url: 'SpontaneousMomentsDetail_Win.html',
				//     pageParam: pageParam
				// });
				loadImgData(onDayData, index);
			});
		}
		function loadImgData(onDayData, index){
			var params = {
				planid: api.pageParam.pid,
				jid: $api.getStorage('cfnetppjxid'),
				courseid: api.pageParam.cid,
				page: 1,
				rows: onDayData.imgNum,
				time: onDayData.time
			};
			cfnetppPOST(url_getOneDaySpontaneousMomentsPics, params, true, function(data, status){
				if (status == 'success') {
					if (data.code == 200) {
						var imgArr = data.data;
						if (imgArr != null && imgArr.constructor == Array) {
							setupPicListView(imgArr, index, function(htmlString){
								$('#picList'+onDayData.time).html(htmlString);
								$('#picMore'+onDayData.time).hide();
								setupCellClick();
							});
						}
					}
				}else{

				}
			});
		}
		function setupPicListView(imgArr, index, callback){
			var htmlString = '';
			var newImgArr = new Array();
			for (var i = 0; i < imgArr.length; i++) {
				var imgData = imgArr[i];
				var newImgData = new Object();
				newImgData["imgid"] = imgData.id;
				newImgData["imgUrl"] = imgData.imgurl;
				newImgArr.push(newImgData);
				htmlString += cellHtmlString(newImgData, index, i);
			}
			currentPicArr[index]["imgArr"] = newImgArr;
			if (callback) {
				callback(htmlString);
			}
		}
		function cellHtmlString(data, indexF, indexS){
			return '<div class="pic-cell" indexF="'+indexF+'" indexS="'+indexS+'">'+
						'<div class="pic-cell-img" style="background-image: url('+data.imgUrl+')"></div>'+
					'</div>';
		}
		function sectionHtmlPrefix(data, index){
			return '<div index="'+index+'" class="pic-div">'+
						'<div class="top-time-title-div">'+
							'<p class="top-time-title base_dark_grey base_title_font">'+
								data.time + ' （共'+data.imgNum+'张）'+
							'</p>'+
						'</div>'+
						'<div id="picList'+data.time+'" class="pic-list-view">';
		}
		function sectionHtmlSuffix(data, index){
			var hideClass = ' hide-class';
			if (data.imgNum > 8) {
				hideClass = '';
			}
			return '</div>'+
					'<div id="picMore'+data.time+'" index="'+index+'" class="load-more-content'+hideClass+'">'+
						'<p class="load-more-title base_dark_grey_shallow base_title_font">'+
							'展开更多...'+
						'</p>'+
					'</div>';
		}
		//下拉刷新
		function setRefreshHeader() {
			api.setRefreshHeaderInfo({
				visible : true,
				bgColor : '#ccc',
				textColor : '#fff',
				textDown : '下拉刷新...',
				textUp : '松开刷新...',
				showTime : true
			}, function(ret, err) {
				loadNewData();
			});
		}

		// 上拉加载
		function setPullUpRefresh() {
			api.addEventListener({
				name : 'scrolltobottom'
			}, function(ret, err) {
				if (refreshCount >= rows) {
					loadMoreData();
				}
			});
		}
		function toChoosePicClick(){
			api.openWin({useWKWebView:true,
			    name: 'SpontaneousMomentsSubmit_Win',
			    url: 'SpontaneousMomentsSubmit_Win.html',
			    pageParam: api.pageParam
			});
		}
		//选择照片p;
		function choosePic(){
			var UIMediaScanner = api.require('UIMediaScanner');
			UIMediaScanner.open({
			    type: 'picture',
			    column: 4,
			    classify: true,
			    max: 9,
			    sort: {
			        key: 'time',
			        order: 'desc'
			    },
			    texts: {
			        stateText: '已选择*项',
			        cancelText: '取消',
			        finishText: '完成'
			    },
			    styles: {
			        bg: '#fff',
			        mark: {
			            icon: '',
			            position: 'bottom_left',
			            size: 20
			        },
			        nav: {
			            bg: '#eee',
			            stateColor: '#000',
			            stateSize: 18,
			            cancelBg: 'rgba(0,0,0,0)',
			            cancelColor: '#000',
			            cancelSize: 18,
			            finishBg: 'rgba(0,0,0,0)',
			            finishColor: '#000',
			            finishSize: 18
			        }
			    },
			    scrollToBottom: {
			        intervalTime: 3,
			        anim: true
			    },
			    exchange: true,
			    rotation: true
			}, function(ret) {
				choosePicArr = ret;
			});
		}
	</script>
</html>